<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar
      title="黑马头条-登陆"
    />
    <!-- 输入区域 -->
    <van-cell-group>
      <van-field
        v-model="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        label="密码"
        v-model.trim="code"
        type="password"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="btn-wrap">
      <van-button type="primary" @click="hLogin" class="btn">登陆</van-button>
    </div>
  </div>
</template>

<script>
// import ajax from '@/utils/request'
import { login } from '@/api/user'

export default {
  name: 'login',
  data () {
    // 登陆必须要调用接口，并要传入参数,由于后端接口中需要参数名是mobile，code
    // 所以，我们这里也写一样的名字。
    return {
      mobile: '13912345678',
      code: '246810'
    }
  },
  methods: {
    check () {
      // 如果验证不通过，返回false
      // 规则：不能为空
      this.mobile_errmsg = /\d{11}/.test(this.mobile) ? '' : '手机号要写对'
      this.code_errmsg = /\d{6}/.test(this.code) ? '' : '密码错误'
      //
      if (this.mobile === '') {
        return false
      }

      if (this.code === '') {
        return false
      }

      return true
    },
    async hLogin () {
      console.log(this.mobile, this.code)
      // 1. 检验
      // 验证用户输入数据的有效性。
      //  (1) 自己写判断
      if (!this.check()) {
        console.log('没有通过验证')
        return
      }
      //  (2) 可以采用vant中的form组件，自带的检验（作业）
      //   参考：https://vant-contrib.gitee.io/vant/#/zh-CN/form#xiao-yan-gui-ze
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        // 老版本是mask
        overlay: true, // 整体添加一个遮罩
        message: '加载中...'
      })
      // 2. 发请求.根据接口文档说明
      try {
        const result = await login(this.mobile, this.code)
        // 登陆成功之后，后端返回的数据
        // 1. 保存token 到vuex (所有的组件都可以访问这个数据)
        //    在组件中如何去调用mutation?(1) mapMutations,(2)$store.commit
        // console.log(result.data.data)
        this.$store.commit('mSetTokenInfo', result.data.data)

        // 2. 后续再发请求时，把token加入到请求头中。

        // 覆盖上一个toast提示
        // 会在3s之后关闭
        this.$toast.success('登陆成功')
        // todo 登陆成功，跳转
      } catch (err) {
        console.log(err)
        this.$toast.fail('登陆失败')
      }
      // ajax.post('/app/v1_0/authorizations', {
      //   mobile: this.mobile,
      //   code: this.code
      // })

      // 3. 根据请求结果，做下一步处理
      //     登陆失败；
      //     登陆成功，跳转
    }
  }
}
</script>

<style lang="less" scoped>
  .login {
    .btn-wrap {
      padding: 20px;
      .btn {
        width: 100%;
        background-color: #6db4fd;
        color:#fff;
      }
    }
  }
</style>
